<template>
  <view :class="[`${prefixCls}-change-password-container`]">
    <uv-form ref="uvForm" labelPosition="left" :model="formData" :rules="rules" labelWidth="80px" :errorType="errorType">
      <uv-form-item label="手机号：" prop="mobile" borderBottom>
        <uv-input v-model="formData.mobile" border="none" placeholder="请输入账号" />
      </uv-form-item>
      <uv-form-item label="旧密码：" type="password" prop="oldPassword" borderBottom>
        <uv-input v-model="formData.oldPassword" border="none" placeholder="请输入旧密码" />
      </uv-form-item>
      <uv-form-item label="新密码：" type="password" prop="newPassword" borderBottom>
        <uv-input v-model="formData.newPassword" border="none" placeholder="请输入新密码" />
      </uv-form-item>
      <uv-form-item label="确认新密码：" type="password" prop="reNewPassword" borderBottom labelWidth="100">
        <uv-input v-model="formData.reNewPassword" border="none" placeholder="请确认新密码" />
        <template #right>
          <cu-verify-code type="success" :mobile="formData.mobile"></cu-verify-code>
        </template>
      </uv-form-item>
      <uv-button type="primary" class="login-button" @click="onSubmit">验 证</uv-button>
    </uv-form>

    <view class="login-operate">
      <uv-text type="primary" size="14px" :text="AuthTypeEnum.ACCOUNT.name" @click="switchAuthType(AuthTypeEnum.ACCOUNT.type)" />
    </view>
  </view>
</template>

<script>
import { AuthTypeEnum } from '@/common/enums/userEnum'
import FormValidate from '@/common/validate/form'

/**
 * props
 * @description
 * @property {Object} errorType 自定义样式
 * @property {String} errorType: message:输入框下方 | toast:弹出 | border-bottom: 作用域底部的下划线显示为红色 | none:不会进行任何提示
 */
import { mapActions, mapGetters } from 'vuex'

export default {
  name: 'cuChangePassword',
  mixins: [],
  props: {
    errorType: {
      type: [String],
      default: 'toast',
    },
  },
  data() {
    return {
      AuthTypeEnum,
      formData: {
        mobile: '',
        oldPassword: '',
        newPassword: '',
        reNewPassword: '',
      },
    }
  },
  // 侦听属性
  watch: {},
  // 计算属性
  computed: {
    ...mapGetters([]),
    rules() {
      return {
        mobile: FormValidate.mobile,
        oldPassword: FormValidate.oldPassword,
        newPassword: FormValidate.newPassword,
        reNewPassword: {
          rules: [
            {
              required: true,
              errorMessage: '请确认密码',
            },
            {
              validateFunction: function (rule, value, data, callback) {
                if (value !== this.formData.newPassword) {
                  callback('两次输入的密码不一致')
                }
                if (value === this.formData.oldPassword) {
                  callback('新密码不能与旧密码相同')
                }
                return true
              },
            },
          ],
        },
      }
    },
  },

  created() {},
  mounted() {},
  destroyed() {},
  methods: {
    ...mapActions('modal', ['SetAuthType']),

    onSubmit() {
      this.$refs.uvForm
        .validate()
        .then((res) => {
          // TODO 验证成功后，修改密码
          this.SetAuthType(AuthTypeEnum.CHANGEPWD.type)
        })
        .catch((errors) => {})
    },

    //
    switchAuthType(e) {
      this.SetAuthType(e)
    },
  },
}
</script>

<style lang="scss" scoped>
.#{prefixCls('change-password-container')} {
  position: relative;
  padding: 80rpx 30rpx;
  .login-button {
    margin-top: 60rpx;
  }

  .login-operate {
    @include flex;
    justify-content: space-between;
    margin-top: 20rpx;
    .uv-text {
      width: auto;
      flex: none;
    }
  }
}
</style>
